<template>
    <div>
      　<el-button style="float: left" type="primary" size="medium" @click="onOpen()">添加广告位</el-button>
      <el-table :data="tableData" >
        <el-table-column prop="ptheme"   label="广告主题" width="180">
        </el-table-column>
        <el-table-column label="广告展示"   width="180">
          <template slot-scope="scope">
            　　　　<img :src="scope.row.purl" width="120" height="50" class="head_pic"/>
          </template>
        </el-table-column>
        <el-table-column prop="createTime"   label="创建时间" width="150">
        </el-table-column>
        <el-table-column prop="pinfo"   label="主题说明"  width="400">
        </el-table-column>
        <el-table-column   label="是否展示"  width="100">
          <template slot-scope="scope">
            　<span v-if="scope.row.pflag == '0'"  key='1'>不展示</span>
              <span v-if="scope.row.pflag == '1'" key='1'>大学处展示</span>
              <span v-if="scope.row.pflag == '2'"  key='1'>中学处展示</span>
              <span v-if="scope.row.pflag == '3'" key='1'>小学处展示</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="updateCycle(scope.row.pid)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="deleteCyc(scope.row.pid)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog v-bind="$attrs" :visible.sync="dialogTableVisible" v-on="$listeners"   title="广告栏添加">
        <el-row :gutter="1">
          <el-form ref="adverForm" :model="cycle" :rules="rules" size="medium" label-width="90px"
                   label-position="left">
            <el-col :span="24">
              <el-form-item label="单行文本" prop="ptheme">
                <el-input v-model="cycle.ptheme" placeholder="请输入单行文本" :maxlength="10" clearable
                          prefix-icon='el-icon-picture-outline' :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>
            <el-upload
              class="upload-demo"
              action="http://127.0.0.1:8999/upload"
              :on-success="handle_success"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :file-list="fileList"
              :before-upload="fileImgBeforeUpload"
              list-type="picture">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
            <el-col :span="19">
              <el-form-item label="多行文本" prop="pinfo">
                <el-input v-model="cycle.pinfo" type="textarea" placeholder="请输入多行文本" :maxlength="50"
                          :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="广告状态" prop="pflag">
                <el-radio-group v-model="cycle.pflag" size="medium">
                  <el-radio v-for="(item, index) in pFlagOptions" :key="index" :label="item.value"
                            :disabled="item.disabled">{{item.label}}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
        <div slot="footer">
          <el-button @click="close">取消</el-button>
          <el-button type="primary" @click="submitForm" >确定</el-button>
        </div>
      </el-dialog>

    </div>
</template>

<script>
  import qs from 'qs'
  export default {
    inheritAttrs: false,
    components: {},
    props: [],
    data() {
      return {
        fileList: [],
        fileUrl:'',
        dialogTableVisible: false,
        formData: {
          pTheme: undefined,
          fileImg: null,
          field104: undefined,
          pFlag: 2,
        },
        rules: {
          ptheme: [{
            required: true,
            message: '请输入单行文本',
            trigger: 'blur'
          }],
          pinfo: [{
            required: true,
            message: '请输入多行文本',
            trigger: 'blur'
          }],
          pflag: [{
            required: true,
            message: '广告状态不能为空',
            trigger: 'change'
          }],
        },
        cycle:{
          pId:'',
          pTheme: '',
          pUrl: '',
          pInfo: '',
          pFlag: ''},
      /*  fileImgAction: 'http://127.0.0.1:8999/upload',
        fileList: [],*/
        pFlagOptions: [{
          "label": "不展示",
          "value": 0
        }, {
          "label": "大学处",
          "value": 1
        }, {
          "label": "中学处",
          "value": 2
        }, {
          "label": "小学处",
          "value": 3
        }],
          tableData: [{
            pid:'',
            pTheme: '',
            pUrl: '',
            createTime: '',
            pInfo: '',
            pflag: ''
          }],
        dialogFormVisible:false,
        pageNo:1,
        pageSize: 5
      }
    },
    methods:{
      findPage: function () {
        this.$axios.get("http://127.0.0.1:8999/cycle/findPage").then(res=>{
          console.log(22222)
          console.log(res.data.data)
          this.tableData=res.data.data;
        })
      },

      handle_success(res) {
        if(res.code==200){
            this.cycle.pUrl=res.message,
          this.$message.success('图片上传成功')
        }

      },
      resetForm() {
        this.$refs['adverForm'].resetFields()
      },
      fileImgBeforeUpload(file) {
        let isRightSize = file.size / 1024 / 1024 < 10

        if(file.length>1){
          this.$message.error('只能选择一张图片')
        }
        if (!isRightSize) {
          this.$message.error('文件大小超过 10MB')
        }
        let isAccept = new RegExp('image/*').test(file.type)
        if (!isAccept) {
          this.$message.error('应该选择image/*类型的文件')
        }
        return isRightSize && isAccept
      },
      //新增
    /*  addEquipment() {
        this.dialogFormVisible = true; //显示弹框

      },*/
       onOpen() {
         console.log(this.cycle)
         this.dialogTableVisible=true
       },
      // onClose() {
      //   this.$refs['adverForm'].resetFields()
      // },
      close() {
        this.dialogTableVisible=false
        window.location.reload();
      },
      handelConfirm() {
        this.$refs['adverForm'].validate(valid => {
          if (!valid) return
          this.close()
        })
      },
      handleRemove(file, fileList) {
       this.$axios.post("http://127.0.0.1:8999/deleteImg?fileUrl="+this.fileUrl).then(res=>{
         if(res.data.code==200){
           this.$message.success('图片删除成功')
           this.cycle.fileUrl=""
         }else {
           this.$message.error('图片删除失败')
         }
       })
      },
      handlePreview(file) {
        console.log(file);
      },
      submitForm() {
        this.$refs['adverForm'].validate(valid => {
          if (!valid) {
            return
          }
          this.cycle.pInfo=this.cycle.pinfo;
          this.cycle.pTheme=this.cycle.ptheme;
          this.cycle.pId=this.cycle.pid
          this.cycle.purl=this.cycle.pUrl
          console.log(this.cycle.pUrl)
          this.$axios.post("http://127.0.0.1:8999/cycle/saveCycle",
           this.cycle).then(res=>{
            if(res.data.code==200){
              this.$message.success('数据添加成功')
              this.close();
             /* alert(this.dialogTableVisible)*/
              this.dialogTableVisible=false
              this.findPage()
            /*  alert(this.dialogFormVisible)*/
            }else {
              this.$message.error('数据添加失败')
            }

          })
        })
      },
      deleteCyc(pid){
        this.$confirm('确定要删除吗?', '信息', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(res=>{
          this.$axios.post("http://127.0.0.1:8999/cycle/deleteById/"+pid).then(res=>{
            if(res.data.code==200){
              this.$message.success('删除成功')
              this.findPage()
            }else {
              this.$message.error('删除失败')
            }
          })
        })
      },
      updateCycle(pid){
        this.dialogTableVisible=true
        this.$axios.get("http://127.0.0.1:8999/cycle/findOneById/"+pid).then(res=>{
          if(res.data.code==200){
            this.cycle=res.data.data;
            this.cycle.pUrl=res.data.data.pUrl;
            console.log()
          }
        })
      }
    },
    mounted:function () {
      this.findPage();
    }
  };
</script>

<style>
  .el-upload__tip {
    line-height: 1.2;
  }
a{
  text-decoration:none
}


</style>
